<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <div>
        <h1 v-on:click.once="count++">count == {{count }}</h1>
        <h2 @click="greet">hello world 1</h2>
        <h2 @click="greet($event)">hello world 2</h2>
        <button @click="say('Are you Ok')">say some1</button>
        <button @click="say('2114-daydayup')">say some2</button>
      </div>
      <div @click="parentclick">
        <h2>WH2114-努力进步每一天</h2>
        <h2 @click.prevent="oneClick">事件修饰符 stop prevent once</h2>
        <h2 @click.stop="twoClick">stop 一定阻止事件冒泡</h2>
      </div>
      <p>
        <input type="text" placeholder="keydown" @keydown="getKeyCode" />
      </p>
      <p>
        <input type="text" placeholder="keypress" @keypress="getKeyCode" />
      </p>
      <p>
        <input type="text" placeholder="keyup" @keyup="getKeyCode" />
      </p>
      <p>
        <span>{{msg}}</span>
        <input
          type="text"
          placeholder="input"
          :value="msg"
          @input="getInputValue"
        />
      </p>
      <p>
        <input type="text" placeholder="change" @change="getInputValue" />
      </p>
      <p @mousemove="mouseMove" class="static a b c">mousemove</p>
      <p class="static a b c" @touchstart="touchstart">touchstart</p>
      <div>
        <h2>Vue 过滤器</h2>
        <h2 v-bind:data-word="word | upper ">word == {{word | upper}}</h2>
        <h2 :data-message="message | lower">message == {{message | lower }}</h2>
        <h2>num --- {{num | tofixed(1) }}</h2>
        <h2>date -- {{date | dateFormat}}</h2>
        <h2>val == {{val | format(3) }}</h2>
        <h2>tel == {{tel | telFormat(' ')}}</h2>
        <h2>money --- {{money}}</h2>
      </div>
    </div>

    <script>
      Vue.filter("upper", (value) => {
        if (!value) return "";
        return value.toUpperCase();
      });
      Vue.filter("tofixed", (value, n) => {
        if (!value) return "";
        n = n || 3;
        value = value * 1;
        return value.toFixed(n);
      });

      Vue.filter("dateFormat", (value) => {
        if (!value) return "";
        var time = new Date(value);
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var day = time.getDate();
        var hour = time.getHours();
        var min = time.getMinutes();
        var sec = time.getSeconds();
        return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
      });

      // 进制转化
      Vue.filter("format", (value, n) => {
        if (!value) return "";
        n = n || 10;
        return value.toString(n);
      });

      Vue.filter("telFormat", (value, str) => {
        if (!value) return "";
        str = str || " - ";
        value = value.toString().split("");
        value.splice(3, 0, str);
        value.splice(8, 0, str);
        return value.join("");
      });

      const vm = new Vue({
        data: {
          title: "v-on 事件绑定",
          count: 1000,
          msg: "2114 - 努力学好三阶段",
          word: "Are you OK ? WH2112 ",
          message: "WORK HARD FOR YOU",
          num: 1314.581111,
          date: new Date(),
          val: 255,
          tel: 18012341234,
          money: 32843198132893.231132,
        },
        filters: {
          // 局部过滤器
          lower(value) {
            if (!value) return "";
            return value.toLowerCase();
          },
        },
        methods: {
          touchstart(e) {
            console.log(e);
            console.log(e.touches[0].clientX);
          },
          mouseMove(e) {
            console.log(e.clientX);
          },
          getInputValue(e) {
            console.log(e.target.value);
            this.msg = e.target.value;
          },
          getKeyCode(e) {
            console.log(e.keyCode);
          },
          parentclick() {
            console.log("I am parent event");
          },
          oneClick() {
            console.log("oneClick = prevent");
          },
          twoClick() {
            console.log("twoClick - stop ");
          },
          greet(e) {
            console.log(e);
          },
          say(msg) {
            alert(msg);
          },
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");
    </script>
    <!-- 
        用特殊变量 $event
        函数调用时候的参数 是 实参
        函数定义时候的参数 是 形参 

        $event vue 提供的事件对象 参数 

        事件修饰符
        event.preventDefault()  阻止浏览器的默认事件
        event.stopPropagation()  阻止事件冒泡 

        v-on 提供了事件修饰符 
        .stop        阻止单击事件继续传播  
        .prevent     阻止浏览器的默认事件  
        .capture     
        .self
        .once        这个事件只能触发一次 
        .passive

        按键修饰符   键盘事件 (键盘码)
        enter    13 
        right    37 
        left
        space     32 
        up
        down 

        v-on:click  @click       
        input 
        change
        click
        dbclick
        keyup
        keydown
        keypress
        mousemove
        mousedown
        mouseup
        mouseenter
        mouserleave 
        touchstart   后面再讲 手机端的触摸事件 
        touchmove
        touchend

        原生绑定事件 (DOMO级事件  DOM2级 事件 )
        onclick="do()"  DOM0  
        document.getElementyById("box").onclick = fn;
        addEventListener("click",fn,false/true)  默认 false  false 冒泡   true 捕获   DOM2 
        removeEventListener("click")

        jquery 绑定事件 
        on  /  off   $('.box').on('click')
        bind  /  unbind  $('.box').bind('click')
        click()

        事件委托   ===> 基于事件冒泡的原理 把子元素的触发 父元素代替子元素执行 (给未来元素绑定事件 把事件绑定到父元素上去)
        $(parent).on('click',child,fn);    
        $(parent).delegate(child,'click',fn);   // 委托 

        过滤器  filter 
        Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化  (日期格式 货币格式)
        过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 
        “管道”符号指示   |
        
        Vue.filter 全局过滤器 
        filters 局部过滤器 

     -->
  </body>
</html>
